import styles from './TabGrid.less';
import Tabs from '../tabs/tabs';
import { Grid } from 'antd-mobile';

function TabGrid(props) {
  let {tabGrid} = props
  let allRegions = []
  tabGrid.forEach(tab => {
    allRegions = [...allRegions,...tab.regions]
  })
  tabGrid.push({
    category_name: '全部',
    regions: allRegions
  })
  tabGrid.reverse()
  let tabs = props.tabGrid.map(tab => ({ title: tab.category_name }));
	console.log("​TabGrid -> props.tabGrid", props.tabGrid)
  let categorys = props.tabGrid.map(tab => tab.regions);
  return (
    <div className={styles.normal}>
      <Tabs tabs={tabs} page={props.page}>
        {categorys.map(regions => (
          regions.map((region, regionIndex) => (
            <div className={styles.region} key={regionIndex}>
              <div className={styles.regionTitle}>{region.region_name}</div>
              <div className={styles.regionContent}>
                {
                  region.vedios && region.vedios.map((vedio,vedioIndex) => (
                    <div key={vedioIndex} className={styles.videoContainer}>
                      <video className={styles.video} src={vedio.url} controls="controls" preload="auto"/>
                      <span>{vedio.name}</span>
                    </div>
                  ))
                }
              </div>
            </div>
          ))
        ))}
      </Tabs>
    </div>
  );
}

export default TabGrid;
